<template>
	<view class="container">
		<nav-header title="征用友商号" custom-nav>
			<template v-slot:right>
				<up-button @click="submitPost" text="发表"></up-button>
			</template>
		</nav-header>
		<view class="info">今日您还可以发送{{number}}/{{max}}条 <text style="color: red;">详情</text></view>
		<view class="container-body">
				<uni-forms>
					 <up-textarea v-model="idea" placeholder="这一刻的想法..." @input="onInputChange"></up-textarea>
			<!-- 图片 -->
					<view class="img">
					<view class="publish-img">
					 	<view v-for="(it,index) in pictures" :key="index">
							<view class="img-container">
					 		<img :src="it" alt="" class="pimg"  @click="previewImage(index)">
							<view class="imgclose"><up-icon  name="close-circle-fill"  size="19" @click="deleteImg(index)"></up-icon></view>
							</view>
					 	</view>
						<image-upload  v-if="pictures.length < 9" :onSuccess="onUnloadImageSuccess" class="publish-img">
								<view class="icon-plus">
									<up-icon  name="plus"  size="50"  v-if="pictures.length < 9":src="picture"></up-icon>
								</view>		
						</image-upload>
					 </view>
					 </view>
				</uni-forms>
			</view>
			<view class="info">将会通过平台通知发送状态到被选中人员。</view>
		<DaTree
		  :data="roomTreeData"
		  labelField="name"
		  valueField="id"
		  showCheckbox
		  checkboxPlacement="right"
		  loadApi="right"
		  @change="handleTreeChange"
		  @expand="handleExpandChange"></DaTree>
			
	</view>
</template>

<script setup>

 import { defineComponent, ref,reactive } from 'vue'



// 定义假数据
const number = ref(0);
const max = ref(5);
const idea = ref('这一刻的想法...');
const pictures = ref([
  'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
  'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
  'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
  'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
  'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
  'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
  'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
  'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
  'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png'
]);
const picture = ref('https://example.com/plus-icon.png');

// 输入框内容变化时的处理方法
const onInputChange = (event) => {
  console.log('输入内容:', event.target.value);
  // 可以在这里添加其他处理逻辑
};

// 预览图片
const previewImage = (index) => {
  console.log('预览图片:', pictures.value[index]);
  // 这里可以添加实际的预览逻辑
};

// 删除图片
const deleteImg = (index) => {
  pictures.value.splice(index, 1);
  console.log('删除图片:', index);
  // 这里可以添加其他处理逻辑
};

// 图片上传成功时的处理方法
const onUnloadImageSuccess = (response) => {
  const newImageUrl = response.url; // 假设返回的响应包含图片URL
  pictures.value.push(newImageUrl);
  console.log('图片上传成功:', newImageUrl);
  // 这里可以添加其他处理逻辑
};
	import DaTree from '@/components/da-tree/index.vue'
	
	const roomTreeData = reactive([
	  {
	    id: '2',
	    name: '内蒙古星数通科技有限公司',
	    children: [
	      {
	        id: '21',
	        name: '开发部',
	        children: [
	          {
	            id: '211',
	            name: '开发一部',
	            children: [{
					id:'2111',
					name:'王五'
				},{
					id:'2112',
					name:'刘二'
				}],
	          },
	          {
	            id: '212',
	            name: '开发二部',
	            children: [],
	          },
	        ],
	      },
	      {
	        id: '22',
	        name: '行政部',
	        children: [
	          {
	            id: '221',
	            name: '财务一部',
	            children: [],
	          },
	          {
	            id: '222',
	            name: '财务二部',
	            children: [],
	          },
	        ],
	      },
	      {
	        id: '23',
	        name: '人事部',
	        children: [
	          {
	            id: '231',
	            name: '人力一部',
	            children: [],
	          },
	          {
	            id: '232',
	            name: '人力二部',
	            append: '更多示例，请下载示例项目查看',
	          },
	        ],
	      },
	    ],
	  },
	])
	
	const handleTreeChange = (allSelectedKeys, currentItem) => {
	console.log('handleTreeChange ==>', allSelectedKeys, currentItem)
	}
</script>

<style lang="scss" scoped>

	.container{
		margin:20rpx;
	}
	.info{
		color: #7F7F7F;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		font-size: 22rpx;
	}
	.container-body{
		position: relative;
		z-index: 1;
	}
	.textarea {
	  resize: none;
	}
	.img{
		margin-left: 40rpx;
		margin-top: 20rpx;
	}
	.publish-img{
		display: flex;
		flex-wrap: wrap;
	}
	.icon-plus{
		width: 190rpx;
		height: 190rpx;
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		background-color: #f2f2f2; /* 浅灰色背景色 */
		margin-top: 10rpx;
	}
	
	.pimg {
		width: 190rpx;
		height: 190rpx;
		padding: 5rpx 20rpx 0 0;
		position: relative;
	}
	.img-container {
	  position: relative;
	}
	.imgclose{
		 position: absolute;
		 top: 1rpx;
		 left: 160rpx;
	}
	:deep(.da-tree-item__label){
		flex:none  !important;
	}
</style>
